<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>电影列表</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <!-- 解决图片资源加载403的问题 -->
    <meta name="referrer" content="no-referrer" />
    <link rel="shortcut icon" href="favicon.ico" />
    <link href="/admin/css/bootstrap.min.css?v=3.3.6" rel="stylesheet" />
    <link href="/admin/css/font-awesome.css?v=4.4.0" rel="stylesheet" />
    <link href="/admin/css/animate.css" rel="stylesheet" />
    <link href="/admin/css/style.css?v=4.1.0" rel="stylesheet" />
  </head>

  <body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
      <div class="row">
        <div class="col-sm-12">
          <div class="ibox float-e-margins">
            <div class="ibox-title">
              <h5>电影列表</h5>
            </div>
            <div class="ibox-content">
              <a href="/admin/movies/new" class="btn btn-info">新增</a>
              <table class="table">
                <thead>
                  <tr>
                    <th>序号</th>
                    <th>名字</th>
                    <th>主图</th>
                    <th>类别</th>
                    <th>浏览次数</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  <% movies.forEach((item, index)=>{ %>
                  <tr>
                    <td><%= index+1 %></td>
                    <td><%= item.title %></td>
                    <td>
                      <img
                        src="<%= item.coverImg %>"
                        style="width: 60px; max-height: 60px;"
                      />
                    </td>
                    <td><%= item.categories %></td>
                    <td><%= item.views %></td>
                    <td>
                      <a
                        href="/admin/movies/edit/<%=item.id%>"
                        class="btn btn-primary btn-sm"
                        >修改</a
                      >
                      <button
                        onclick="delOne('<%= item.id %>')"
                        class="btn btn-danger btn-sm"
                      >
                        删除
                      </button>
                    </td>
                  </tr>
                  <% }) %>
                </tbody>
              </table>
              <div id="Paginator" style="text-align: center;">
                <ul id="pageLimit"></ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <form action="/admin/movies/remove" method="POST" id="formForDel">
      <input type="hidden" name="id" id="delId" />
    </form>

    <!-- 全局js -->
    <script src="/admin/js/jquery.min.js?v=2.1.4"></script>
    <script src="/admin/js/bootstrap.min.js?v=3.3.6"></script>
    <script src="/admin/js/bootstrap-paginator.min.js"></script>
    <script>
      $("#pageLimit").bootstrapPaginator({
        currentPage: "<%= page %>", // 当前页码
        totalPages: "<%= pages %>", // 总页数
        size: "normal",
        bootstrapMajorVersion: 3,
        alignment: "right",
        numberOfPages: 5,
        itemTexts: function (type, page, current) {
          switch (type) {
            case "first":
              return "首页";
            case "prev":
              return "上一页";
            case "next":
              return "下一页";
            case "last":
              return "末页";
            case "page":
              return page;
          }
        },
        onPageClicked: function (e, oe, t, p) {
          window.location.href = "/admin/movies?page=" + p;
        },
      });

      function delOne(id) {
        $("#delId").val(id);
        $("#formForDel").submit();
      }
    </script>
  </body>
</html>
